<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="cuiyuan" />
		<meta name="Keywords" content="cuiyuan的博客"/>
		<meta name="Description" content="cuiyuan的博客,技术分享,记录回忆"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>cuiyuan的博客-CSS/JS特效</title>
		
		<link rel="shortcut icon" href="img/touch-icon-iphone-144.png">
		<link rel="apple-touch-icon" sizes="57x57" href="img/touch-icon-iphone-144.png" />
		<link rel="apple-touch-icon" sizes="72x72" href="img/touch-icon-iphone-144.png" />
		<link rel="apple-touch-icon" sizes="114x114" href="img/touch-icon-iphone-144.png" />
		<link  rel="apple-touch-icon" sizes="144x144" href="img/touch-icon-iphone-144.png" />
		
		<link rel="stylesheet" href="css/icon-study.css"/>
		<link rel="stylesheet" href="css/common.css"/>
		<link rel="stylesheet" href="css/css-js.css"/>
		<script type="text/javascript" src="js/selector.js"></script>
		<script type="text/javascript" src="js/css-js.js"></script>
		
	</head>
	<body ondragstart="return false" oncontextmenu="return false" onselect="document.selection.empty()">
		<!--[if lte IE 8]>
		<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，请 <a href="https://support.dmeng.net/upgrade-your-browser.html" target="_blank">升级浏览器</a> 以获得更好的体验！</p>
		<![endif]-->
		<header>
			<div class="header-box">
				<p>
					“他说风雨中这点痛算什么，擦干泪不要怕，至少我们还有梦!”
					“我相信我就是我，我相信明天，我相信青春没有地平线。”
				</p>
				<div class="box">
					<div class="light"></div>
					<span class="box1">
						<div class="star">
							<div class="srT sr1"></div>
							<div class="srL sr2"></div>
							<div class="srL sr3"></div>
							<div class="srT sr4"></div>
							<div class="spot"></div>
						</div>
					</span>
					<span class="box2">
						<div class="star">
							<div class="srT sr1"></div>
							<div class="srL sr2"></div>
							<div class="srL sr3"></div>
							<div class="srT sr4"></div>
							<div class="spot"></div>
						</div>
					</span>
				</div>
				<div class="album r">
					<img src="img/h1.jpg" alt="相册"/>
				</div>
				<div class="album r">
					<img src="img/h2.jpg" alt="相册"/>
				</div>
			</div>
		</header>
		<nav class="nav">
			<div class="title l">记录回忆</div>
			<ul>
				<li><a href="index.html">首页</a></li>
				<li><a href="study.html">学无止境</a></li>
				<li class="current"><a href="css-js.html">CSS/JS特效</a></li>
				<li><a href="http://www.lmlblog.com/blog/11/" target="_blank">博客模板</a></li>
				<li><a href="message.html">留言板</a></li>
			</ul>
		</nav>
		<div class="embellish">
			<a class="rocket"></a>
		</div>
		<section>
			<aside>
			<div class="aside">
				<dl>
					<dt class="leaf">CSS特效</dt>
					<dd> <em class="iconfont icon-dian "></em>文字</dd>
					<dd> <em class="iconfont icon-dian "></em>按钮</dd>
				</dl>
				<dl>
					<dt class="leaf">Canvas/SVG</dt>
					<dd> <em class="iconfont icon-dian "></em>饼图</dd>
					<dd> <em class="iconfont icon-dian "></em>柱状图</dd>
					<dd> <em class="iconfont icon-dian "></em>折线图</dd>
					<dd> <em class="iconfont icon-dian "></em>刮刮乐</dd>
				</dl>
				<dl>
					<dt class="leaf">JS特效</dt>
					<dd> <em class="iconfont icon-dian "></em>菜单</dd>
					<dd> <em class="iconfont icon-dian "></em>侧栏</dd>
					<dd> <em class="iconfont icon-dian "></em>抽奖</dd>
					<dd> <em class="iconfont icon-dian "></em>轮播图</dd>
				</dl>
			</div>
			</aside>
			<article>
				<div class="project">
					<h2><em class="iconfont icon-biji1"></em>CSS特效</h2>
					<div class="case clearfix">
						<h3><em class="iconfont icon-yumaobi"></em>文字</h3>
						<div class="cbox l">
							<p>渐变放大</p>
							<div class="c-box c-box1">
								<span>WELCOME</span>
								<span>WELCOME</span>
							</div>
						</div>
						<div class="cbox l">
							<p>荧光填充</p>
							<div class="c-box c-box2">
								<span>WELCOME</span>
							</div>
						</div>
						<div class="cbox l">
							<p>3D立体</p>
							<div class="c-box c-box3">
								<span>3D TEXT</span>
							</div>
						</div>
						<div class="cbox l">
							<p>霓虹灯效</p>
							<div class="c-box c-box4">
								<span>W</span><span>E</span><span>L</span><span>C</span><span>O</span><span>M</span><span>E</span>
							</div>
						</div>
					</div>
					<div class="case clearfix">
						<h3><em class="iconfont icon-yumaobi"></em>按钮</h3>
						<div class="cbox l">
							<p>荧光科幻</p>
							<div class="c-box c-box6">
								<span>WELCOME</span>
							</div>
						</div>
						<div class="cbox l">
							<p>拟态仿真</p>
							<div class="switch">
								<div class="switch__inner">
									<span class="switch__status">OFF</span>
								</div>
								<span class="switch__toggle"></span>
							</div>
						</div>
						<div class="cbox l">
							<p>点击完成</p>
							<div class="c-box c-box7">
								<span>click</span>
								<div></div>
							</div>
						</div>
						<div class="cbox l">
							<p>炫彩渐变</p>
							<div class="c-box c-box5">
								<span>WELCOME</span>
							</div>
						</div>
					</div>
				</div>
				<div class="project">
					<h2><em class="iconfont icon-biji1"></em>Canvas/SVG</h2>
					<div class="case clearfix">
						<h3><em class="iconfont icon-yumaobi"></em>饼图</h3>
						<div class="sbox">
							<span>样式一</span>
							<iframe src="demo/Pie_chart/Pie_chart.html" width="320" height="240"></iframe>
						</div>
						<div class="sbox">
							<span>样式二</span>
							<iframe src="demo/svgjsRadial_Chart.html" width="320" height="240"></iframe>
						</div>
					</div>
					<div class="case clearfix">
						<h3><em class="iconfont icon-yumaobi"></em>柱状图</h3>
						<div class="sbox">
							<span>样式一</span>
							<iframe src="demo/Bar_Chart/Bar_Chart.html" width="340" height="240"></iframe>
						</div>
						<div class="sbox">
							<span>样式二</span>
							<iframe src="demo/3D_Bar_Chart/3D_Bar_Chart.html" width="340" height="240"></iframe>
						</div>
					</div>
					<div class="case clearfix">
						<h3><em class="iconfont icon-yumaobi"></em>折线图</h3>
						<div class="sbox">
							<span>样式一</span>
							<iframe src="demo/Line_Chart/Line_Chart.html" width="340" height="240"></iframe>
						</div>
						<div class="sbox">
							<span>样式二</span>
							<iframe src="demo/Skill_Chart/Skill_Chart.html" width="340" height="200"></iframe>
						</div>
					</div>
					<div class="case clearfix">
						<h3><em class="iconfont icon-yumaobi"></em>刮刮乐</h3>
						<iframe src="demo/Scratch_Card/Scratch_Card.html" width="800" height="300"></iframe>
					</div>
				</div>
				<div class="project">
					<h2><em class="iconfont icon-biji1"></em>JS特效</h2>
					<div class="case clearfix">
						<h3><em class="iconfont icon-yumaobi"></em>菜单</h3>
						<div class="sbox">
							<span>划过弹出</span>
							<div class="s-box">
								<ul class="ull">
									<li class="li" style="margin-left: 20px;">
										<a>菜单一</a>
										<ul class="lii" style="display: block;">
											<li>项目1</li>
											<li>项目2</li>
											<li>项目3</li>
										</ul>
									</li>
									<li class="li">
										<a>菜单二</a>
										<ul class="lii">
											<li>项目1</li>
											<li>项目2</li>
											<li>项目3</li>
										</ul>
									</li>
									<li class="li">
										<a>菜单三</a>
										<ul class="lii">
											<li>项目1</li>
											<li>项目2</li>
											<li>项目3</li>
										</ul>
									</li>
									<li class="li">
										<a>菜单四</a>
										<ul class="lii">
											<li>项目1</li>
											<li>项目2</li>
											<li>项目3</li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
						<div class="sbox">
							<div class="s-box">
								<span>划过缓慢弹出</span>
								<ul class="ull">
									<li class="li2" style="margin-left: 20px;">
										<a>菜单一</a>
										<ul class="lii2" style="display: block;">
											<li>项目1</li>
											<li>项目2</li>
											<li>项目3</li>
										</ul>
									</li>
									<li class="li2">
										<a>菜单二</a>
										<ul class="lii2">
											<li>项目1</li>
											<li>项目2</li>
											<li>项目3</li>
										</ul>
									</li>
									<li class="li2">
										<a>菜单三</a>
										<ul class="lii2">
											<li>项目1</li>
											<li>项目2</li>
											<li>项目3</li>
										</ul>
									</li>
									<li class="li2">
										<a>菜单四</a>
										<ul class="lii2">
											<li>项目1</li>
											<li>项目2</li>
											<li>项目3</li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="case clearfix">
						<h3><em class="iconfont icon-yumaobi"></em>侧栏</h3>
						<p style="padding-left: 60px; font-weight: bold; background-color: #c6c6c6; height: 40px; line-height: 40px;"><em>由于展示窗口尺寸有限，侧栏功能请参考本页侧栏</em></p>
					</div>
					<div class="case clearfix">
						<h3><em class="iconfont icon-yumaobi"></em>抽奖</h3>
						<div class="zbox">
							<iframe src="demo/A Pen by koda/A Pen by koda.html" width="260" height="240" style="margin-top: 0;"></iframe>
						</div>
						<div class="zbox">
							<iframe src="demo/layer/jQuery手机端中奖领取抽奖代码.html" width="260" height="240" style="margin-top: 0;"></iframe>
						</div>
						<div class="zbox">
							<iframe src="demo/compound/jQuery专题页老虎机抽奖代码.html" width="260" height="240" style="margin-top: 0;"></iframe>
						</div>
					</div>
					<div class="case clearfix">
						<h3><em class="iconfont icon-yumaobi"></em>轮播图</h3>
						<div class="sbox">
							<span>渐变式</span>
							<div class="banner">
								<div>
									<a class="a-img-ban img-ban-curr"><img class="img-ban" src="img/1.jpg"></a> 
									<a class="a-img-ban"><img class="img-ban" src="img/2.jpg"></a>
									<a class="a-img-ban"><img class="img-ban" src="img/3.jpg"></a>
									<a class="a-img-ban"><img class="img-ban" src="img/4.jpg"></a>
								</div>
								<ul>
									<li class="li-i curr"></li>
									<li class="li-i"></li>
									<li class="li-i"></li>
									<li class="li-i"></li>
								</ul>
							</div>
						</div>
						<div class="sbox">
							<span>转动式</span>
							<div class="banner2">
								<span id="lt">&lt;</span>
								<ul id="ul1">
									<li><img src="img/1.jpg"></li>
									<li><img src="img/2.jpg"></li>
									<li><img src="img/3.jpg"></li>
									<li><img src="img/4.jpg"></li>
								</ul>
								<ul id="ul2">
									<li class="curr"></li>
									<li></li>
									<li></li>
									<li></li>
								</ul>
								<span id="gt">&gt;</span>
							</div>
						</div>
					</div>
				</div>
			</article>
		</section>
		<footer class="clearfix"><p>@cuiyuan的个人博客</p></footer>
	</body>
</html>
